<template>
    <div>
        <el-form label-position="right" label-width="80px" size="small">
            <page-main title="基本信息">
                <el-row :gutter="20">
                    <el-col :md="8">
                        <el-form-item label="名称">
                            <el-input v-model="practiceForm.name" placeholder="请输入实训名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :md="8">
                        <el-form-item label="教师">
                            <el-input v-model="practiceForm.teacher" placeholder="请输入教师名称" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :md="8">
                        <el-form-item label="实训时间">
                            <el-date-picker
                                v-model="practiceForm.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="起始时间"
                                end-placeholder="终止时间"
                                style="width: 100%;"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :md="8">
                        <el-form-item label="学分设置">
                            <el-input-number v-model="practiceForm.num" controls-position="right" :min="1" />
                        </el-form-item>
                    </el-col>
                    <el-col :md="8">
                        <el-form-item label="实习类型">
                            <el-radio-group v-model="practiceForm.type">
                                <el-radio :label="0">见习</el-radio>
                                <el-radio :label="1">研习</el-radio>
                                <el-radio :label="2">实习</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </page-main>
        </el-form>

        <page-main>
            <el-row :gutter="20">
                <el-col :md="8" class="template-class-setting">
                    <el-card header="班级设置" shadow="never">
                        <div class="template-class-setting-head flex align-center">
                            <div class="class-setting-head-left">
                                <el-radio-group v-model="classSetting.radio" size="small" class="flex">
                                    <el-radio-button label="1">全部选择</el-radio-button>
                                    <el-radio-button label="2">全部取消</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div class="class-setting-head-right" style="margin-left: auto;">
                                <el-select v-model="classSetting.select.value" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in classSetting.select.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </div>
                        </div>
                        <el-input v-model="classSetting.search" placeholder="请输入内容" class="class-setting-search" />
                        <div class="class-setting-select flex">
                            <div class="flex-1 class-setting-select-left">
                                <tree-panel ref="panelTree" :data-list="factoryList" @changeNode="getTreeNode" />
                            </div>
                            <div class="flex-1 class-setting-select-right">
                                <transition-group appear tag="ul">
                                    <li v-for="(item,index) in classSetting.selectList"
                                        :key="index+1"
                                        class="flex justify-center align-center"
                                    >
                                        <span>
                                            {{ item.label }}
                                        </span>
                                        <svg-icon name="el-icon-error" class="icon" @click="delList(index)" />
                                    </li>
                                </transition-group>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="16" class="template-credit">
                    <el-card header="学分配置" shadow="never">
                        <div class="template-credit-config">
                            <div class="credit-config-title flex">
                                物理
                                <span>
                                    <el-checkbox-group v-model="creditConfig.titleCheck">
                                        <el-checkbox :label="1">
                                            高中物理
                                        </el-checkbox>
                                        <el-checkbox :label="0">
                                            初中物理
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </span>
                            </div>
                            <div class="credit-config-list">
                                <ul>
                                    <li v-for="(item,index) in creditConfig.creditList" :key="index + 1">
                                        <el-row style="margin-bottom: 13px;" class="flex justify-center align-center">
                                            <el-col :md="4">
                                                {{ item.title }}
                                            </el-col>
                                            <el-col :md="9" class="flex"
                                                    style="margin-right: 10px;"
                                            >
                                                <el-checkbox v-model="item.checkAll"
                                                             :indeterminate="item.indeterminate"
                                                             style="margin-right: 13px;"
                                                             @change="onCheckAllChange(index,$event)"
                                                >
                                                    全选
                                                </el-checkbox>
                                                <el-checkbox-group v-model="item.resourceSelect"
                                                                   @change="handleCheckedChange(index,$event)"
                                                >
                                                    <el-checkbox v-for="(data,dataIndex) in item.resourceOptions"
                                                                 :key="dataIndex + 1"
                                                                 :label="data.value"
                                                    >
                                                        {{ data.label }}
                                                    </el-checkbox>
                                                </el-checkbox-group>
                                            </el-col>
                                            <el-col :md="11" style="display: flex;">
                                                <span>
                                                    分值:<el-input-number v-model="item.points" size="mini" :min="0"
                                                                        style="width: 57%; margin-left: 5%;"
                                                                        controls-position="right"
                                                    />
                                                </span>
                                                <span>
                                                    最高占比:<el-input-number v-model="item.Percentage" size="mini" :min="0"
                                                                          label="%"
                                                                          style="width: 56%; margin-left: 5%;"
                                                                          controls-position="right"
                                                    />
                                                </span>
                                            </el-col>
                                        </el-row>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="template-credit-config">
                            <div class="credit-config-title flex">
                                考核设置
                            </div>
                            <div class="credit-config-list">
                                <ul>
                                    <li />
                                </ul>
                            </div>
                        </div>
                        <div class="template-credit-config">
                            <div class="credit-config-title flex">
                                实训要求
                            </div>
                            <div class="credit-config-edit">
                                <editor v-model="content" @input="getEditData" />
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>

        <fixed-action-bar>
            <el-button-group>
                <el-button type="primary">保存内容模式</el-button>
                <el-button>新增学分模式</el-button>
            </el-button-group>
        </fixed-action-bar>
    </div>
</template>

<script>
import FixedActionBar from '@/components/FixedActionBar'
import Editor from '@/components/Editor'
import SvgIcon from '@/components/SvgIcon'
import TreePanel from '@/components/treePanel/treePanel'
import PageMain from '@/components/PageMain'

export default {
    name: 'AddPractice',
    components: {FixedActionBar, Editor, SvgIcon, TreePanel, PageMain},
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            content: '<h1 style="text-align: center;">请输入实训要求</h1>',
            practiceForm: {
                name: '',
                teacher: '李明',
                time: '',
                num: 0,
                type: 0
            },
            classSetting: {
                radio: '',
                select: {
                    value: '0',
                    options: [
                        {
                            value: '0',
                            label: '物理'
                        }, {
                            value: '1',
                            label: '化学'
                        }, {
                            value: '2',
                            label: '生物'
                        }, {
                            value: '3',
                            label: '语文'
                        }, {
                            value: '4',
                            label: '数据'
                        }
                    ]
                },
                search: '',
                selectList: []
            },
            creditConfig: {
                titleCheck: [],
                creditList: [
                    {
                        title: '教学文案资源',
                        indeterminate: false,
                        checkAll: false,
                        resourceOptions: [
                            {
                                label: '教案',
                                value: '0'
                            },
                            {
                                label: '学案',
                                value: '1'
                            },
                            {
                                label: '课件',
                                value: '2'
                            }
                        ],
                        resourceSelect: [],
                        points: 0.01,
                        Percentage: 20
                    },
                    {
                        title: '教学微课资源',
                        indeterminate: false,
                        checkAll: false,
                        resourceOptions: [
                            {
                                label: '录屏课',
                                value: '1'
                            },
                            {
                                label: '录像课',
                                value: '2'
                            }
                        ],
                        resourceSelect: [],
                        points: 0.02,
                        Percentage: 30
                    }
                ]
            },
            factoryList: [
                {
                    label: '物理',
                    id: '2020-0',
                    children: [
                        {
                            label: '2020级1班',
                            id: '2020-1',
                            children: []
                        },
                        {
                            label: '2020级2班',
                            id: '2020-2',
                            children: [
                                {label: 'B01组(王晓)', id: 'B-01'},
                                {label: 'B02组(李明超)', id: 'B-02'}
                            ]
                        },
                        {
                            label: '2020级3班',
                            id: '2020-3',
                            children: [
                                {label: 'C01组(王晓)', id: 'C-01'},
                                {label: 'C02组(李明超)', id: 'C-02'}
                            ]
                        }
                    ]
                }
            ]
        }
    },
    watch: {
        'classSetting.search'(val) {
            this.$refs.panelTree.$refs.tree.filter(val)
        }
    },
    mounted() {
        const id = this.id
        if (id !== '') {
            this.getPracticeData()
        }
    },
    methods: {
        getPracticeData() {
            console.log('1231')
        },
        getTreeNode(list) {
            this.classSetting.selectList = [...list]
        },
        delList(index) {
            this.classSetting.selectList.splice(index, 1)
        },
        onCheckAllChange(index, e) {
            const indexData = this.creditConfig.creditList[index]
            indexData.indeterminate = false
            if (e) {
                const arr = []
                indexData.resourceOptions.forEach(item => {
                    arr.push(item.value)
                })
                indexData.resourceSelect = arr
            } else {
                indexData.resourceSelect = []
            }
        },
        handleCheckedChange(index, val) {
            const checkedCount = val.length
            const indexData = this.creditConfig.creditList[index]
            indexData.checkAll = checkedCount === indexData.resourceOptions.length
            indexData.indeterminate = checkedCount > 0 && checkedCount < indexData.resourceOptions.length
        },
        getEditData(val) {
            console.log(val)
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-date-editor .el-range-separator {
    width: 8%;
}
::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
}
.test {
    overflow-y: auto;
}
.class-setting-search {
    margin-top: 15px;
    .class-setting-search-btn {
        background: $bg-primary;
        color: #fff;
    }
}
.class-setting-select {
    margin-top: 10px;
    height: auto;
    .class-setting-select-left,
    .class-setting-select-right {
        border: 1px solid #dedede;
        border-radius: 5px;
        margin-right: 10px;
        padding: 10px;
        font-size: 14px;
    }
    .class-setting-select-right {
        ul {
            li {
                padding: 5px 10px;
                .icon {
                    cursor: pointer;
                    margin-left: auto;
                    color: red;
                }
            }
        }
    }
}
.v-enter,
.v-lerve-to {
    opacity: 0;
    transform: translateY(80px);
}
.v-enter-active,
.v-lerve-active {
    transition: all 1s ease;
}
.v-move {
    transition: all 2s ease;
}
.v-leave-active {
    position: absolute;
}
.template-credit {
    ::v-deep .el-card__body {
        padding: 20px 13px;
    }
}
.template-credit-config {
    margin-bottom: 30px;
    .credit-config-title {
        border-bottom: 0.5px solid #ebeef5;
        padding-bottom: 12px;
        margin-bottom: 15px;
        span {
            margin-left: 16px;
            font-size: 12px;
        }
    }
    .credit-config-list {
        ul {
            li {
                font-size: 14px;
            }
        }
    }
}
.template-class-setting {
    ::v-deep .el-card__body {
        padding: 20px 10px;
    }
}
</style>
